import { Input, Space, Tabs, Button, message } from 'antd';
import styles from './index.less';
import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons';
import { useState } from 'react';
import Base64 from 'crypto-js/enc-base64'
import Utf8 from 'crypto-js/enc-utf8'
import MD5 from 'crypto-js/md5'


const { TabPane } = Tabs;
const { TextArea } = Input;



export default () => {

    const [base64OriginalText, setBase64OriginalText] = useState()
    const [base64Text, setBase64Text] = useState()

    const [urlEncodeOriginalText, setUrlEncodeOriginalText] = useState()
    const [urlEncodeText, setUrlEncodeText] = useState()

    const [md5OriginalText, setMd5OriginalText] = useState()
    const [md5EncodeText, setMd5EncodeText] = useState()




    return (
        <div className={styles.container}>
            <Tabs>
                <TabPane key="Base64" tab="Base64编码/解码">
                    <div className={styles.tabPane}>
                        <TextArea className={styles.textarea}
                            autoSize={{ minRows: 20, maxRows: 50 }}
                            value={base64OriginalText}
                            onChange={(e => setBase64OriginalText(e.target.value))}></TextArea>
                        <Space direction="vertical" style={{
                            marginTop: 40
                        }}>
                            <Button type="primary" icon={<DoubleRightOutlined />} onClick={(e) => {
                                if (!base64OriginalText) {
                                    message.error("原始数据为空")
                                    return
                                }
                                setBase64Text(Base64.stringify(Utf8.parse(base64OriginalText)))
                            }}>编码</Button>
                            <Button type="primary" icon={<DoubleLeftOutlined />} onClick={(e) => {
                                if (!base64Text) {
                                    message.error("base64数据为空")
                                    return
                                }
                                try {
                                    setBase64OriginalText(Base64.parse(base64Text).toString(Utf8))
                                } catch(e) {
                                    console.log(e.toString())
                                    message.error(e.toString())
                                }
                            }}>解码</Button>
                        </Space>
                        <TextArea className={styles.textarea} autoSize={{ minRows: 20, maxRows: 50 }} 
                            value={base64Text}
                            onChange={(e) => setBase64Text(e.target.value)}></TextArea>
                    </div>
                </TabPane>
                <TabPane key="UrlEncode" tab="Url编码/解码">
                    <div className={styles.tabPane}>
                        <TextArea className={styles.textarea} 
                            autoSize={{ minRows: 20, maxRows: 50 }}
                            value={urlEncodeOriginalText}
                            onChange={(e => setUrlEncodeOriginalText(e.target.value))}></TextArea>
                        <Space direction="vertical" style={{
                            marginTop: 40
                        }}>
                            <Button type="primary" icon={<DoubleRightOutlined />} onClick={(e) => {
                                if (!urlEncodeOriginalText) {
                                    message.error("原始数据为空")
                                    return
                                }
                                setUrlEncodeText(encodeURIComponent(urlEncodeOriginalText))
                            }}>编码</Button>
                            <Button type="primary" icon={<DoubleLeftOutlined />} onClick={(e) => {
                                if (!urlEncodeText) {
                                    message.error("url编码数据为空")
                                    return
                                }
                                setUrlEncodeOriginalText(decodeURIComponent(urlEncodeText))
                            }}>解码</Button>
                        </Space>
                        <TextArea className={styles.textarea} 
                            autoSize={{ minRows: 20, maxRows: 50 }}
                            value={urlEncodeText}
                            onChange={(e => setUrlEncodeText(e.target.value))}
                            ></TextArea>
                    </div>
                </TabPane>
                <TabPane key="md5" tab="Md5编码加密">
                    <div className={styles.tabPane}>
                        <TextArea className={styles.textarea} 
                            autoSize={{ minRows: 20, maxRows: 50 }}
                            value={md5OriginalText}
                            onChange={(e => setMd5OriginalText(e.target.value))}></TextArea>
                        <Space direction="vertical" style={{
                            marginTop: 40
                        }}>
                            <Button type="primary" icon={<DoubleRightOutlined />} onClick={(e) => {
                                if (!md5OriginalText) {
                                    message.error("原始数据为空")
                                    return
                                }
                                console.log(MD5(md5OriginalText).toString().toUpperCase())
                                setMd5EncodeText(MD5(md5OriginalText).toString().toUpperCase())
                            }}>加密</Button>
                        </Space>
                        <TextArea className={styles.textarea} 
                            autoSize={{ minRows: 20, maxRows: 50 }}
                            value={md5EncodeText}
                            onChange={(e => setMd5EncodeText(e.target.value))}></TextArea>
                    </div>
                </TabPane>

            </Tabs>
        </div>
    )
}